<template>
  <div ref="container" style="width: 330px;"></div>
</template>

<script lang="js" setup>
import { Pie } from '@antv/g2plot';
import { onMounted, useTemplateRef, defineProps, watch } from 'vue';

const props = defineProps({
  data: Object,
  title: String
})

const cont = useTemplateRef('container')
let piePlot = null

onMounted(() => {
  piePlot = new Pie(cont.value, {
    data: props.data,
    width: 150,
    appendPadding: 10,
    angleField: 'value',
    colorField: 'type',
    radius: 1,
    innerRadius: 0.6,
    label: {
      type: 'inner',
      offset: '-50%',
      content: '{value}',
      style: {
        textAlign: 'center',
        fontSize: 14,
      },
    },
    interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          fontSize: 18,
          color: 'white'
        },
        content: props.title || '标签分布',
      },
    },
  });

  piePlot.render();
})
watch(() => props.data, () => piePlot.changeData(props.data))
</script>
